import React, { useState } from 'react';
import { X } from 'lucide-react';

interface EditConfirmModalProps {
  isOpen: boolean;
  onConfirm: (autoRegenerateMemo: boolean) => void;
  onCancel: () => void;
  deleteCount: number;
  previewMessages?: Array<{role: string; content: string}>;
  hasMore?: boolean;
  memoImpact?: 'none' | 'will_regenerate' | 'will_clear';
  currentMemoExists?: boolean;
}

const EditConfirmModal: React.FC<EditConfirmModalProps> = ({
  isOpen,
  onConfirm,
  onCancel,
  deleteCount,
  previewMessages = [],
  hasMore = false,
  memoImpact = 'none',
  currentMemoExists = false
}) => {
  const [autoRegenerateMemo, setAutoRegenerateMemo] = useState(true);
  
  if (!isOpen) return null;

  const getMemoImpactMessage = () => {
    switch(memoImpact) {
      case 'will_regenerate':
        return '📝 对话摘要将自动更新';
      case 'will_clear':
        return '⚠️ 对话摘要将被清空（消息太少）';
      default:
        return null;
    }
  };

  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 backdrop-blur-sm flex items-center justify-center z-50 p-4">
      <div 
        className="bg-white rounded-2xl shadow-2xl w-full max-w-lg max-h-[70vh] overflow-y-auto"
        onClick={e => e.stopPropagation()}
      >
        {/* Header */}
        <div className="flex items-center justify-between p-6 border-b border-gray-100">
          <h3 className="text-lg font-semibold text-gray-900 flex items-center gap-2">
            ⚠️ 修改这条消息？
          </h3>
          <button
            onClick={onCancel}
            className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
          >
            <X className="w-5 h-5 text-gray-500" />
          </button>
        </div>
        
        {/* Body */}
        <div className="p-6">
          <p className="text-gray-700 mb-4">
            这会删除后面的 <span className="font-semibold text-red-600">{deleteCount}</span> 条对话哦～
          </p>
          
          {/* 备忘录影响提示 */}
          {memoImpact !== 'none' && currentMemoExists && (
            <div className="mb-4 p-3 bg-amber-50 border border-amber-200 rounded-lg">
              <p className="text-amber-800 text-sm font-medium mb-2">
                {getMemoImpactMessage()}
              </p>
              {memoImpact === 'will_regenerate' && (
                <label className="flex items-center gap-2 cursor-pointer">
                  <input 
                    type="checkbox" 
                    checked={autoRegenerateMemo}
                    onChange={(e) => setAutoRegenerateMemo(e.target.checked)}
                    className="rounded border-amber-300 text-amber-600 focus:ring-amber-500"
                  />
                  <span className="text-amber-700 text-sm">自动更新对话摘要</span>
                </label>
              )}
            </div>
          )}
          
          {/* 删除预览 */}
          {previewMessages.length > 0 && (
            <div className="mb-4">
              <p className="text-sm font-medium text-gray-700 mb-3">将被删除的消息：</p>
              <div className="space-y-2 max-h-32 overflow-y-auto">
                {previewMessages.map((msg, index) => (
                  <div key={index} className="flex items-start gap-2 p-2 bg-red-50 rounded-lg border border-red-100">
                    <span className="text-lg flex-shrink-0 mt-0.5">
                      {msg.role === 'user' ? '👤' : '🤖'}
                    </span>
                    <span className="text-sm text-gray-700 line-clamp-2">{msg.content}</span>
                  </div>
                ))}
                {hasMore && (
                  <div className="text-center text-sm text-gray-500 py-2">
                    还有更多...
                  </div>
                )}
              </div>
            </div>
          )}
        </div>
        
        {/* Footer */}
        <div className="flex items-center justify-end gap-3 p-6 border-t border-gray-100">
          <button 
            className="px-4 py-2 text-gray-600 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors"
            onClick={onCancel}
          >
            算了，不改了
          </button>
          <button 
            className="px-4 py-2 bg-blue-600 text-white hover:bg-blue-700 rounded-lg transition-colors font-medium"
            onClick={() => onConfirm(autoRegenerateMemo)}
          >
            没事，继续
          </button>
        </div>
      </div>
    </div>
  );
};

export default EditConfirmModal;